<template>
  <v-app>
    <!-- 导航栏   -->
    <v-app-bar
        elevation="4"
        outlined
        app
        color="#FFF"
    >
      <header-bar/>
    </v-app-bar>

    <!-- 内容区域 -->
    <v-main>
      <v-parallax :src="bgImg" height=600>
        <div class="text-center">
          <h2 class="text-h2 font-weight-bold mb-4">知否</h2>
          <p>为您打造最牛逼的个人博客网站-贺哥</p>
        </div>
      </v-parallax>

      <v-container>
        <div class="text-center mt-8">
          <h2 class="text-h2 font-weight-bold mb-4">共享盛宴</h2>
          <p>为您打造最牛逼的个人博客网站-贺哥</p>
        </div>
      </v-container>
    </v-main>

    <v-container fluid class="d-flex justify-center category-card">
      <v-card v-for="card in cards" :key="card.id"
              elevation="2" width="280" class="ml-10"
      >
        <v-card-title class="font-weight-black">{{ card.name }}</v-card-title>
        <v-card-subtitle>{{ card.desc }}</v-card-subtitle>
        <v-card-text>
          <v-chip small label color="transparent" v-for="label in card.labels" :key="label">{{ label }}</v-chip>
        </v-card-text>
      </v-card>
    </v-container>
    <v-container fluid class="d-flex justify-center category-card">
      <v-card v-for="card in cards" :key="card.id"
              elevation="2" width="280" class="ml-10"
      >
        <v-card-title class="font-weight-black">{{ card.name }}</v-card-title>
        <v-card-subtitle>{{ card.desc }}</v-card-subtitle>
        <v-card-text>
          <v-chip small label color="transparent" v-for="label in card.labels" :key="label">{{ label }}</v-chip>
        </v-card-text>
      </v-card>
    </v-container>

    <!-- 登录注册弹出框   -->
    <login-register-dialog/>
    <!--  页脚区域  -->
    <v-footer padless class="mt-10">
      <zf-footer/>
    </v-footer>

  </v-app>
</template>

<script>

import LoginRegisterDialog from "@/components/LoginRegisterDialog/LoginRegisterDialog";

export default {
  name: "HomeView",
  components: {LoginRegisterDialog},
  data() {
    return {
      bgImg: "",
      cards: [],
    }
  },
  methods: {
    getBgImg() {
      this.bgImg = 'https://pic3.zhimg.com/v2-fbb002ec83393f1b87a55cfb69c864db_r.jpg'
    },
    getCards() {
      this.cards = [
        {
          id: 1,
          name: "博客",
          desc: "百万博主分享经验",
          href: "/blog",
          labels: [
            "Java",
            "Python",
            "Hadoop",
            "Liunx",
            "C++",
            "Unity",
            "UI 设计",
            "Android",
            "IOS",
            "HarmonyOs",
          ],
        },
        {
          id: 2,
          name: "学堂",
          desc: "百万教学视频畅游知识海洋",
          href: "/school",
          labels: [
            "VueJs",
            "前端",
            "后台",
            "大数据",
            "影视后期",
            "游戏开发",
            "人工智能",
            "物联网",
            "游戏建模",
            "应用开发",
          ],
        },
        {
          id: 3,
          name: "视频",
          desc: "百万影视视频畅享盛会",
          href: "/film",
          labels: [
            "电视剧",
            "电影",
            "纪录片",
            "少儿",
            "动漫",
            "短视频",
            "综艺",
            "港剧",
            "台剧",
            "韩剧",
            "恐怖片",
            "好莱坞",
          ],
        },
        {
          id: 4,
          name: "考证",
          desc: "千款认证考试线上测试",
          href: "/exam",
          labels: [
            "模拟考",
            "刷题",
            "期末考",
            "课堂考",
            "甲骨文认证",
            "华为认证",
            "三星认证",
            "TCL认证",
            "微软认证",
          ],
        },
      ]
    }
  },
  created() {
    this.getBgImg()
    this.getCards()
  }
}
</script>

<style lang="less" scoped>
  .category-card > .v-card:hover {
    transform: scale(1.1);
    transition: transform .5s ease-in-out;
    box-shadow: 0 10px 15px rgba(0, 0, 0, .1);
  }
</style>
